<template>
  <!-- <div> -->
  <Dividelr>
    <template #left>
      <LBG :buttonList="lbuttonList" />
    </template>
    <template #right>
      <!-- <component :is="documentPage" /> -->
      <!-- <router-view v-slot="{ Component: documentPage, route }">
        <keep-alive>
          <component
            :is="documentPage"
            :key="route.name"
            v-if="route.meta.keepAlive"
          />
        </keep-alive>
        <component
          :is="documentPage"
          :key="route.name"
          v-if="!route.meta.keepAlive"
        />
      </router-view> -->
      <router-view />
    </template>
  </Dividelr>
  <!-- </div> -->
</template>
<script setup>
import { ref, onMounted, defineOptions, nextTick } from "vue";
import { useRoute } from "vue-router";
import useTagStore from '@/stores/tagList'
const tagStore = useTagStore();
import Dividelr from "@/layout/components/dividelr.vue";
import Dividetb from "@/layout/components/dividetb.vue";
import LBG from "@/components/ButtonGroup/leftButtonGroup.vue";
import FilterSearch from "@/components/TopTitleBox/FilterSearch.vue";
// import MyFolder from "./MyFolder.vue";
import router from "@/router";
// import MyKnowledge from "./MyKnowledge.vue";
// import MyBin from "./MyBin.vue";
defineOptions({ name: "documentCom" });
const route = useRoute();
// 按钮列表
const lbuttonList = ref([
  {
    label: "我的文件夹",
    icon: "el-icon-folder",
    type: "b2",
    active: true,
    component: "MyFolder",
    path: "/document/l/myfolder",
    onClick: (e) => {
      selectFunction("我的文件夹", "/document/l/myfolder");
      console.log(e.target);
      // e.target.parentNode.parentNode.
    },
  },
  {
    label: "我的知识库",
    icon: "el-icon-files",
    type: "b2",
    component: "MyKnowledge",
    path: "/document/l/myknowledge",
    onClick: (e) => {
      selectFunction("我的知识库", "/document/l/myknowledge");
      console.log(e.target);
    },
  },
  {
    label: "我的模板库",
    icon: "MyTemplateLibIcon",
    type: "b2",
    component: "MyTemplate",
    path: "/document/l/mytemplate",
    onClick: (e) => {
      selectFunction("我的模板库", "/document/l/mytemplate");
      console.log(e.target);
    },
  },
  {
    label: "回收站",
    icon: "IconRecycleBin",
    type: "b2",
    component: "MyBin",
    path: "/document/l/mybin",
    onClick: (e) => {
      selectFunction("回收站", "/document/l/mybin");
      console.log(e.target);
    },
  },
  {
    label: "测试",
    icon: "el-icon-folder",
    type: "b2",
    component: "MyFolderTest",
    path: "/document/l/myfoldertest",
    onClick: (e) => {
      selectFunction("测试", "/document/l/myfoldertest");
      console.log(e.target);
    },
  }
]);
// const documentPage = ref(MyFolder);

const selectFunction = (name, path) => {
  // if (['/document/l/myfolder', '/document/l/myknowledge', '/document/l/mytemplate', '/document/l/mybin'].includes(route.path)) {
    // alert(path+'替换')
    tagStore.refreshTagList(
      { name: null, breadcrumbName: null, fullPath: null },
      { name: path, breadcrumbName: name, fullPath: path },
      true
    );
    router.replace({ path });
  // } else {
  //   // alert(path+'添加')
  //   tagStore.addTagList({
  //     name: path,
  //     fullPath: path,
  //     breadcrumbName: '文档',
  //     historyList: [],
  //   });
  //   router.push({ path });
  // }
  console.log(name, path, tagStore.tagList, '38921739193');
};
const searchCallBack = (word, time) => {
  console.log("搜索回调", word, time);
};
onMounted(() => {
  console.log("文档管理layout挂载完成");
});
</script>
